<!-- @module approval-travel -->
<!-- @author: YunTao.Li -->
<!-- @description: 出差申请审批页面 -->
<!-- @since: 2019-11-27 17:33:35 -->
<template>
  <div>
    <fieldset class="fieldset" style="margin:10px;">
      <legend class="legend-font" v-text="travel_form_text" />
      <el-form ref="travelInputForm" :model="travelInputForm" :label-position="labelPosition" label-width="120px" size="mini">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="组织名称" prop="orgName">
              <el-input v-model="travelInputForm.orgName" name="orgName" placeholder="组织机构" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="travelInputForm.deptName" name="deptName" placeholder="部门名称" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申请人" prop="empName">
              <el-input v-model="travelInputForm.empName" name="empName" placeholder="申请人" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="申请单编码" prop="bizTravelCode">
              <el-input v-model="travelInputForm.bizTravelCode" name="bizTravelCode" placeholder="保存后自动生成" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker v-model="travelInputForm.startDate" style="width:100%;" type="date" name="startDate" placeholder="开始日期" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="开始时段" prop="startTimeType">
              <el-input v-model="travelInputForm.startTimeType" name="startTimeType" placeholder="开始时段" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker v-model="travelInputForm.endDate" style="width:100%;" type="date" name="endDate" placeholder="结束日期" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="结束时段" prop="endTimeType">
              <el-input v-model="travelInputForm.endTimeType" name="endTimeType" placeholder="结束时段" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="交通工具" prop="traffic">
              <el-input v-model="travelInputForm.traffic" name="traffic" placeholder="交通工具" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="返回交通工具" prop="backTraffic">
              <el-input v-model="travelInputForm.backTraffic" name="backTraffic" placeholder="返回交通工具" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="出差天数" prop="days">
              <el-input v-model="travelInputForm.days" name="days" placeholder="出差天数" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="实际天数" prop="actualDays">
              <el-input v-model="travelInputForm.actualDays" name="actualDays" placeholder="实际天数" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="18" :lg="18" :xl="18">
            <el-form-item label="出差路线" prop="trace">
              <el-input v-model="travelInputForm.trace" name="trace" placeholder="出差路线" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="出差待办事由" prop="travelDesc">
              <el-input v-model="travelInputForm.travelDesc" name="travelDesc" placeholder="出差待办事由" :disabled="true" style="width:80%" type="textarea" rows="4" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </fieldset>

    <!-- 随同人员 begin-->
    <fieldset class="fieldset" style="margin-top:5px;">
      <legend class="legend-font" v-text="travel_emp_text" />
      <div class="div-table">
        <fieldset class="fieldset" style="margin-top:15px;">
          <legend class="legend-font" />
          <el-table ref="travelEmpTable" :data="travelInputForm.bizTravelEmpList" :v-model="travelInputForm.bizTravelEmpList" border fit highlight-current-row style="width: 100%" max-height="250" size="mini">
            <!-- <el-table-column type="selection" width="55" /> -->
            <el-table-column align="center" type="index" width="55" label="序号" />
            <!--员工名称-->
            <el-table-column align="center" label="员工名称" width="200px" prop="empName">
              <template slot-scope="scope">
                <span>{{ scope.row.empName }}</span>
              </template>
            </el-table-column>
            <!--员工ID-->
            <el-table-column align="center" label="员工编码" prop="empId">
              <template slot-scope="scope">
                <span>{{ scope.row.empId }}</span>
              </template>
            </el-table-column>
            <!--开始日期-->
            <el-table-column align="center" label="开始日期" prop="startDate">
              <template slot-scope="scope">
                <span>{{ scope.row.startDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--开始时段-->
            <el-table-column align="center" label="开始时段" prop="startTimeType">
              <template slot-scope="scope">
                <span>{{ scope.row.startTimeType }}</span>
              </template>
            </el-table-column>
            <!--结束日期-->
            <el-table-column align="center" label="结束日期" prop="endDate">
              <template slot-scope="scope">
                <span>{{ scope.row.endDate | parseTime('{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <!--结束时段-->
            <el-table-column align="center" label="结束时段" prop="endTimeType">
              <template slot-scope="scope">
                <span>{{ scope.row.endTimeType }}</span>
              </template>
            </el-table-column>
          </el-table>
        </fieldset>
      </div>
    </fieldset>
    <!-- 随同人员 end-->
    <!--file begin-->
    <fileUpload :param-pa-doc-id="travelInputForm.fileParamPaDocId" :disable-upload-button="true" :disable-delete-button="true" />
    <!--file end-->
    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <!-- <el-button type="warning" @click="onLoadTravel">加载待审批的出差单</el-button> -->
      <el-button type="success" @click="onApproved">审批通过</el-button>
      <el-button type="danger" @click="onUnApproved">审批驳回</el-button>
    </div>
  </div>

</template>

<script>
import { getTravelInfoForApproval, approveTravel, approveTravelDisagree } from '@/api/attendance/approval-service'
import fileUpload from '@/views/attendance/components/fileupload'

export default {
  components: { fileUpload },
  data() {
    return {
      labelPosition: 'right',
      travel_form_text: '出差申请单信息',
      travel_emp_text: '随同人员',
      btn_emp_del_disabled: false,
      travelInputForm: {
        fileParamPaDocId: '',
        bizTravelId: '',
        insCode: '',
        taskId: '',
        ouId: '',
        deptId: '',
        createdBy: '',
        startDate: new Date(),
        startTimeType: '',
        endDate: new Date(),
        endTimeType: '',
        traffic: '',
        backTraffic: '',
        days: '',
        bizTravelCode: '',
        actualDays: '',
        trace: '',
        travelDesc: '',
        bizTravelEmpList: [{
          empName: '',
          empId: '',
          startDate: '',
          startTimeType: '',
          endTimeType: ''
        }]
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    // 接收从待办跳转带过来的待办参数
    const processInstID = localStorage.getItem('processInstID')
    this.travelInputForm.insCode = processInstID

    this.travelInputForm.bizTravelCode = ''
    // this. = 'BT000001584150630'
    // step1 : 清空随同人员列表

    this.travelInputForm.bizTravelEmpList.splice(0, this.travelInputForm.bizTravelEmpList.length)
  },
  mounted() {
    this.onLoadTravel()
  },
  methods: {
    onLoadTravel() { // 获得数据
      const insCode = this.travelInputForm.insCode
      const _this = this
      getTravelInfoForApproval(insCode).then(response => {
        this.travelInputForm = response.data
        const taskId = localStorage.getItem('taskId')
        this.travelInputForm.taskId = taskId
        //* ***file begin */
        _this.travelInputForm.fileParamPaDocId = _this.travelInputForm.bizTravelId
        /** **file end */
      }).then({
      })
    },
    onUnApproved() { // 审批驳回
      const travelId = this.travelInputForm.bizTravelId
      const data = this.travelInputForm

      this.$confirm('确定要驳回审批么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        approveTravelDisagree(travelId, data).then(response => {
          if (response.code === 200) {
            this.$message({ type: 'success', message: '审批驳回成功!' })
            setTimeout(() => {
              this.$router.go(-1)
            }, 500)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(err => { console.error(err) })
    },
    onApproved() { // 审批通过
      const travelId = this.travelInputForm.bizTravelId
      const data = this.travelInputForm

      this.$confirm('确定要通过审批么?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        approveTravel(travelId, data).then(response => {
          if (response.code === 200) {
            this.$message({ type: 'success', message: '提交成功!' })
            setTimeout(() => {
              this.$router.go(-1)
            }, 500)
          } else {
            this.$message.error(response.message)
          }
        })
      }).catch(err => { console.error(err) })
    }
  }
}
</script>

<style>

</style>
